﻿<form class="table-markers" onsubmit="return false;" autocomplete="off">
    <div data-bind="foreach: markers">
        <div class="row">
            <div class="large-3 columns">
                <select data-bind="value: color">
                    <option value="none">None</option>
                    <option value="red">Red</option>
                    <option value="green">Green</option>
                    <option value="blue">Blue</option>
                    <option value="yellow">Yellow</option>
                    <option value="gray">Gray</option>
                </select>
            </div>
            <div class="large-7 columns" data-bind="with: filterInput">
                <input id="tableFilter" type="text" autocomplete="off"
                    data-bind="instantValue: filter, css: { error: invalid }, title: errorMessage" placeholder="PartitionKey eq 'pkey' and RowKey eq 'rkey'" />
            </div>
            <div class="large-2 columns">
                <a href="javascript:void(0)" data-bind="modalOpen: 'tableQueryBuilder', click: function ($data) { $parents[2].tablesView.queryBuilder.init($data.filter) }">edit</a>
            </div>
        </div>
    </div>
</form>
